<template>
  <div class="container">
    <div class="img-box">
      <img src="../../assets/img/test.jpg">
      <div class="overlay">
        <div class="title">图片标题1</div>
      </div>
    </div>
    <div class="img-box">
      <img src="../../assets/img/test.jpg">
      <div class="overlay">
        <div class="title">图片标题2</div>
      </div>
    </div>
  </div>

</template>

<script>
  export default {
    name: "Data"
  }
</script>

<style scoped>
  .container {
    width: 1200px;
    height: auto;
  }

  .container .img-box {
    overflow: hidden;
    position: relative;
    width: 240px;
    height: 135px;
    display: inline-block;
    cursor: pointer;

  }

  .container img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transition: all .5s;
  }

  .container .overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    line-height: 135px;
    text-align: center;
    background-color: rgba(0, 0, 0, .5);
    opacity: 0;
  }

  .container .title {
    color: #fff;
  }

  .img-box:hover img {
    transform: scale(1.2);
  }

  .img-box:hover .overlay {
    opacity: 1;
  }
</style>